<!--历史详情 -->
<template>
  <div class="app-container">
    <el-row :gutter="20">
      <el-col :span="24" :xs="24">
        <el-row :gutter="10" class="task_top mb20">
          <div class="task_top_1">
            <p><svg-icon icon-class="peoples" /> {{form.evaluateQuestTitle}}</p>
            <span>（描述：{{form.evaluateQuestContent}}）</span>
          </div>
          <div class="task_top_2">
            <span>业务：{{form.evaluateQuestBusiness}}</span>
            <span>评估任务：{{form.evaluateQuestIndexSum}}项</span>
            <span>评估周期：{{form.evaluateQuestCycle}} <span v-if="form.evaluateQuestTriggerMonth && form.evaluateQuestTriggerHours">（每月{{form.evaluateQuestTriggerMonth}}号{{form.evaluateQuestTriggerHours}}分）</span> </span>
            <span>开始时间：{{form.startTime}}</span>
            <span>评估人员：{{form.evaluateExpertNames}}</span>
          </div>
        </el-row>
        <div class="detail_title">文件上传</div>
        <el-row :gutter="10" class="task_top2">
          <el-col :span="1.5" class="fl">
            <div v-if="form.zhpgEvaluateTemplateList && form.zhpgEvaluateTemplateList.length > 0">
              <div v-for="(item,index) in form.zhpgEvaluateTemplateList" :key="index">
                <div class="flex">
                  <div style="width: 450px;color:#409eff">{{item.evaluateTemplateTitle}}</div>
                  <div>
                    <i class="el-icon-download" @click="handleFile('download',item,index)"  style="margin-left: 10px"></i>
                  </div>
                </div>
              </div>
            </div>
          </el-col>
        </el-row>
        <div class="detail_title">指标评分</div>
        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="100px">
          <el-form-item label="评分专家:" prop="userName">
            <el-select @change="getPageList" v-model="queryParams.expertId" placeholder="请选择" clearable style="width: 250px">
              <el-option v-for="(item,index) in expertList" :key="item.userId" :label="item.nickName" :value="item.userId"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <el-table v-loading="loading" :data="tableData.list" border>
          <el-table-column label="序号" width="50" align="center" type="index" />
          <el-table-column label="评估指标名称" align="center"  prop="evaluateIndexZdmc" />
          <el-table-column label="指标值" align="center"  prop="evaluateIndexZdz" />
          <el-table-column label="是否专家评分" align="center" prop="evaluateIndexIszj" />
          <el-table-column label="评分内容" align="center" prop="evaluateExpertSubContent" />
        </el-table>
        <div v-if="tableData.list.length > 0" style="height: 50px;display: flex;align-items: center;justify-content: center;">
          <!--          @current-change="onPageChange"-->
          <el-pagination :page-size="form.pageSize" background layout="prev, pager, next" :total="tableData.total"></el-pagination>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { queryExpertList, queryHistoryDetail, queryHistoryDetail2 } from '@/api/eval'
  export default {
    name: "historyDetail",
    data() {
      return {
        loading: false,// 遮罩层
        queryParams: {// 查询参数
          pageNum: 1,
          pageSize: 10,
          historyQuestId:'',//综合评估-评估任务表主键ID
          expertId:'',//专家组长ID
        },
        form: {},//详情数据
        tableData:{ //分页数据
          list:[],
          total:0,
        },
        expertList:[],//专家的集合
      };
    },
    mounted() {
      const {id} = this.$route.query
      if (id) {
        this.getDetail(id)
        this.queryParams.historyQuestId = id
        this.getPageList()
      }
    },
    created() {
      queryExpertList().then((res) => {
        this.expertList = res.data
      })
    },
    methods: {
      // 查询基础数据
      getDetail(id) {
        queryHistoryDetail(id).then(({code,data}) => {
          if (code === 200) {
            this.form = data
            console.log('this.form',this.form)
          }
        }).catch(err => {
          this.form = {}
        })
      },
      // 查询分页数据
      getPageList() {
        this.loading = true
        queryHistoryDetail2(this.queryParams).then((res) => {
          this.tableData = {
            list:res.rows,
            total:res.total
          }
          this.loading = false
        }).catch(err => {
          this.tableData = {
            list:[],
            total:0
          }
          this.loading = false
        })
      },
      handleFile(type,item,index) {

      },
    },
  };
</script>

<style lang="scss" scoped>
  ::v-deep .el-dialog__header {
    background-color: #354161;
    padding-bottom: 20px;
  }

  ::v-deep .el-dialog__footer {
    background-color: #f1f2f4;
    padding-top: 20px;
  }

  ::v-deep .el-dialog__title {
    color: white;
  }

  ::v-deep .czlialog {
    margin-top: 20vh;
  }

  .flex-container {
    width: 100%;
    display: flex;
    justify-content: center;
  }

  .inner-container {
    width: 80%;
  }

  .info-row {
    height: 40px;
  }

  .flex-row {
    display: flex;
    align-items: center;
  }

  .label {
    width: 30%;
    text-align: right;
    margin-right: 10px;
    font-weight: 900;
  }

  .value {
    width: 70%;
  }

  /* Assuming el-input is a custom component, you might need additional styling */
  .input-field {
    width: 70%;
  }

  /* 头部 */
  .task_top {
    height: 150px;
    box-shadow: 0 0px 10px rgba(0, 0, 0, 0.12), 0 2px 5px rgba(0, 0, 0, 0.08);
    box-sizing: border-box;
    padding: 20px;
  }

  .task_top2 {
    min-height: 70px;
    box-shadow: 0 0px 10px rgba(0, 0, 0, 0.12), 0 2px 5px rgba(0, 0, 0, 0.08);
    box-sizing: border-box;
    padding: 20px;
    margin-bottom: 20px;
  }

  .task_top_1 {
    width: 100%;
    height: 50px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
  }

  .task_top_1 p {
    font-size: 20px;
    color: rgb(40, 121, 228);
    font-family: "微软雅黑";
    font-weight: bold;
  }

  .task_top_1 span {
    font-size: 15px;
    color: #bbb;
    font-family: "微软雅黑";
    margin-left: 20px;
    transform: translateY(3px);
  }

  .task_top_2 {
    margin-top: 10px;
    width: 100%;
    height: 50px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    font-size: 15px;
  }
  .detail_title {
    height: 25px;
    display: flex;
    align-items: center;
    font-size: 17px;
    color: rgb(17, 120, 204);
    font-weight: bolder;
    padding-left: 15px;
    border-left: 4px solid rgb(17, 120, 204);
    margin-bottom: 15px;
  }

</style>
